<template>
    <div class="container">
        <div class="text"><h1>{{ $t('loginView.userName') }}</h1></div>
        <div class="text"><el-input aria-autocomplete="none" v-model="loginParm.username" class="input" :placeholder="$t('loginView.userNameInput')" clearable /></div>
        <div class="text"><h1>{{ $t('loginView.password') }}</h1></div>
        <div class="text"><el-input v-model="loginParm.password" class="input" :placeholder="$t('loginView.passwordInput')" clearable /></div>
        <div class="text"><h1>{{ $t('loginView.code') }}</h1></div>
        <div class="input_code">
            <div style="float: left; margin-right: 30px; width: 37%;"><el-input style="width: 100%;" v-model="loginParm.code" class="input" :placeholder="$t('loginView.codeInput')" /></div>
            <el-image style="width: 18%; height: 80%; margin-top: 3px;" :src="codeInfo" fit="fit" />
        </div>
        <div class="text">
            <div style="float: left;"><el-text>{{$t('loginView.noAccount')}}</el-text></div>
            <div><el-link type="primary" @click='openRegister=true'>{{$t('loginView.clickme')}}</el-link></div>
        </div>
        <div><el-button class="buttom" @click="doLogin()" color="#626aef" :dark="isdark" plain>{{$t('loginView.login')}}</el-button></div>
    </div>



    <el-dialog v-model="openRegister" :title="$t('loginView.register')" width="600" align-center center>
        <registerInputView :isdark="isdark"/>
    </el-dialog>
</template>


<script setup lang="ts">
import useLogin from '@/hooks/useLogin';
import { defineProps,onMounted } from 'vue';
import registerInputView from './registerInputView.vue';
import useRegister from '@/hooks/useRegister';
defineProps(['isdark'])
const {loginParm,codeInfo,doLogin,getCode } = useLogin();
const {openRegister} = useRegister()
onMounted(()=>{
    getCode()
})

</script>

<style scoped>
.container {
    margin-top: 15%;
    margin-left: 45%;
}

.text {
        margin-bottom: 10px;
        font-size: 8px;
    }
    .input_code{
        height: 70px;
        margin-bottom: 0px;
    }

    .buttom{
        font-family: inherit;
        width: 40%;
        height: 50px;
        box-shadow: 0 15px 20px rgba(84, 84, 84, 0.3);
        margin-left: 60px;
        margin-top: 10px;
    }

    .input {
        /* box-shadow: var(--el-box-shadow); */
        box-shadow: 0 15px 20px rgba(84, 84, 84, 0.3);
        font-size: 20px;
        width: 60%;
        height: 60px;

    }
</style>